﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jQuery Tree, Tree Widget, TreeView" />
    <meta name="description" content="The jqxTree displays a hierarchical collection of items. You
        can populate it from 'UL' or by using its 'source' property." />
    <title id='Description'>The sample demonstrates the Tree's drag and drop functionality.
    </title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdragdrop.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getTheme();

            // Create jqxTree
            $('#treeA').jqxTree({ allowDrag: true, allowDrop: true, height: '300px', width: '220px', theme: theme,
                dragStart: function (item) {
                    if (item.label == "Community")
                        return false;
                }
            });
            $('#treeB').jqxTree({ allowDrag: true, allowDrop: true, height: '300px', width: '220px', theme: theme,
                dragEnd: function (item, dropItem, args, dropPosition, tree) {
                    if (item.label == "Forum")
                        return false;
                }
            });
            $("#treeA, #treeB").bind('dragStart', function (event) {
                $("#dragStartLog").text("Drag Start: " + event.args.label);
                $("#dragEndLog").text("");
            });

            $("#treeA, #treeB").bind('dragEnd', function (event) {
                $("#dragEndLog").text("Drag End");
                 if (event.args.label) {
                    var ev = event.args.originalEvent;
                    var x = ev.pageX;
                    var y = ev.pageY;
                    if (event.args.originalEvent.originalEvent.touches) {
                        var touch = event.args.originalEvent.originalEvent.changedTouches[0];
                        x = touch.pageX;
                        y = touch.pageY;
                    }
                    var offset = $("#textarea").offset();
                    var width = $("#textarea").width();
                    var height = $("#textarea").height();
                    var right = parseInt(offset.left) + width;
                    var bottom = parseInt(offset.top) + height;

                    if (x >= parseInt(offset.left) && x <= right) {
                        if (y >= parseInt(offset.top) && y <= bottom) {
                            $("#textarea").val(event.args.label);
                        }
                    }
                }
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div style='float: left;'>
            <div id='treeA' style='float: left; margin-left: 0px;'>
                <ul>
                    <li id='home' item-selected='true'>Home</li>
                    <li item-expanded='true'>Solutions
                        <ul>
                            <li>Education</li>
                        </ul>
                    </li>
                    <li>Financial services</li>
                    <li>Community</li>
                </ul>
            </div>
            <div style='float: left; margin-left: 20px;' id="treeB">
                <ul>
                    <li>Products
                    </li>
                    <li item-expanded='true'>Support
                        <ul>
                            <li>Support home</li>
                            <li>Customer Service</li>
                        </ul>
                    </li>
                    <li>Knowledge base</li>
                    <li>Forum</li>
                </ul>
            </div>
            <div style="width: 200px; height: 200px; float: left; margin-left: 20px;">
                <textarea rows="5" id="textarea"></textarea>
            </div>
        </div>
        <div style="font-size: 13px; font-family: Verdana; padding-top: 20px; clear: both;">
                <b>Events Log:</b>
                <div id="dragStartLog">
                </div>
                <div id="dragEndLog">
                </div>
                <br />
                <b>Note:</b>
                <br />
                Dragging of "Community" is disabled.
                <br />
                Dropping of "Forum" is disabled.
        </div>
    </div>
</body>
</html>
